<template>
	<!-- 问题五参照 录入采购池弹框 这个才是参照，，刚才打开错了-->
	<a-modal :title="title" :width="1300" :maskClosable="false" :visible="visible" :confirmLoading="confirmLoading"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">

				<a-form-item label="" :labelCol="{ span: 24, offset: 0 }" :wrapperCol="{ span: 24, offset: 0 }" has-feedback="">
					<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
						:rowKey="(record) => record.materialId" :showPagination="false">

						<template slot="number" slot-scope="text, record">
							<a-input-number :min="0" v-model="record.number" placeholder="请输入数量" />
						</template>
						<template slot="classGroupId" slot-scope="text, record">
							<a-select placeholder="请选择" allowClear v-model="record.classGroupId">
								<a-select-option :value="item.classGroupId" v-for="(item, index) in teamList" :key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</template>
						<!-- <span slot="image" slot-scope="text"> -->
						<!-- <viewer>
								<img v-for="(item, index) in text.split(',')" v-show="index == 0" :key="index"
									style="width:45px; height:45px" :src="`${$store.state.baseUrl}/sysFileInfo/preview?id=${item}`"
									alt="" />
							</viewer> -->
						<!-- <image-preview :images="text" /> -->
						<!-- <a >查看图片{{ Viewer }}</a> -->
						<!-- </span> -->
						<span slot="image" slot-scope="text,record">
							<image-preview1 :images="text" :imageUrl="record.imageUrl" />
						</span>
						<span slot="number">{{ tableTitle }}</span>

						<template slot="remark" slot-scope="text, record">
							<a-input v-model:value="record.remark" />
						</template>

						<span slot="action" slot-scope="text, record">
							<a @click="del(record)">删除</a>
						</span>
					</s-table>
				</a-form-item>


			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import { add, addList, list, page } from '@/api/modular/main/emsmaterialpool/emsMaterialPoolManage'

import { page as teamPage } from '@/api/modular/main/classGroup/classGroup'

export default {
	components: {
		STable,
	},
	computed: {
		title() {
			switch (this.poolType) {
				case this.$businessEnum.ORDER_TYPE_ENUM.purchaseOrder.id:
					return '录入采购池'
				case this.$businessEnum.ORDER_TYPE_ENUM.inOrder.id:
					return '无单入库'
				case this.$businessEnum.ORDER_TYPE_ENUM.outOrder.id:
					return '无单出库'
				default:
					return '录入物料池'
			}
		},
		tableTitle() {
			switch (this.poolType) {
				case this.$businessEnum.ORDER_TYPE_ENUM.inOrder.id:
					return '入库数量'
				case this.$businessEnum.ORDER_TYPE_ENUM.outOrder.id:
					return '出库数量'
				default:
					return '采购数量'
			}
		}
	},
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return new Promise((resolve, reject) => {
					let tableData = this.tableData
					let rowOne = tableData[0]
					let materialType = rowOne.materialType
					let poolType = rowOne.poolType
					console.log('rowOne.poolType', rowOne.poolType)
					let materialIds = tableData.map(value => value.materialId).join(',')
					console.log('tabdata9999999999999999', tableData)
					list({ materialIds, poolType }).then(res => {
						let materialPools = res.data
						tableData.forEach(materialPoolParam => {
							let findMaterialPoolResult = materialPools.find(value => value.materialId == materialPoolParam.materialId)
							materialPoolParam.waitNumber = findMaterialPoolResult ? findMaterialPoolResult.number : 0
							materialPoolParam.remark = ''
						})
						console.log("tableData",tableData);
						
						let value = {
							pageNo: 1,
							pageSize: -1,
							rainbow: [1],
							rows: tableData,
							totalPage: 1,
							totalRows: tableData.length
						}
						return resolve(value)
					})
				})
			},
			columns: [       // 表头
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					key: 'index',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '名称',
					width: '200px',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'image',
					// customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '池中数量',
					dataIndex: 'waitNumber'
				},
				{
					title: '领用方',
					width: '120px',
					dataIndex: 'classGroupId',
					scopedSlots: { customRender: 'classGroupId' }
				},
				{
					dataIndex: 'number',
					width: '100px',
					slots: { title: 'number' },
					scopedSlots: { customRender: 'number' }
				},
				{
					title: '备注',
					dataIndex: 'remark',
					width: '120px',
					scopedSlots: { customRender: 'remark' }
				},
				{
					title: '操作',
					dataIndex: 'action',
					width: '100px',
					scopedSlots: { customRender: 'action' }
				}
			],
			poolType: null,
			tableData: [],
			teamList: [],
		}
	},
	methods: {
		add(record) {
			console.log(record)
			if (!record?.selectedRows?.length) {
				this.$message.error('请先选择物料')
				return
			}
			this.visible = true
			let rows = record.selectedRows
			console.log('rows', rows)
			this.poolType = record.poolType

			rows = rows.map(row => Object.assign({
				materialPoolId: null,
				materialId: 0,
				number: 1,
				poolType: record.poolType,
				materialType: record.materialType.id,
				status: 0,
				
				remark: '',
				createTime: null,
				createUser: null,
				updateTime: null,
				updateUser: null,
			}, row))
			this.tableData = rows
			console.log();
			
			setTimeout(() => {
				this.$refs.table.refresh()
			}, 100)
			this.getTeamList();
		},
		/**
	 * 获取领用方
	 */
		getTeamList() {
			teamPage({
				pageSize: -1,
				status: 0
			}).then(res => {
				this.teamList = res.data.rows;
			})
		},
		add1(record) {
			this.visible = true
			this.tableData = [...record]
			console.log("this.tableData----------",this.tableData);
			
			setTimeout(() => {
				this.$refs.table.refresh()
			}, 100)
		},
		handleSubmit() {
			this.confirmLoading = true
			let values = this.tableData.map(value => {
				let { materialPoolId, materialId, number, poolType, materialType, remark, status, createTime, createUser, updateTime, updateUser, classGroupId } = value
				return { materialPoolId, materialId, number, poolType, materialType, remark, status, createTime, createUser, updateTime, updateUser, classGroupId }
			})
			addList(values).then((res) => {
				this.confirmLoading = false
				if (res.success) {
					this.$message.success('新增成功')
					this.handleCancel()
					this.$emit('ok', values)
				} else {
					this.$message.info('新增失败：' + res.message)
				}
			}).finally((res) => {
				this.confirmLoading = false
			})
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
		},
		del(record) {
			let findIndex = this.tableData.findIndex(value => value == record)
			this.tableData.splice(findIndex, 1)
		},
	}
}
</script>
